<template>
    <el-menu v-bind="originProp" router @select="(index, indexPath, item)=>{$emit('select', index, indexPath, item)}">
        <template v-for="menu in computedTreeData">
            <StElMenuSub  v-if="isMenu(menu)" :index="index" :is-menu="isMenu" :is-page="isPage" :menu="menu" :key="menu.id"></StElMenuSub>
            <StElMenuItem v-else-if="isPage(menu)" :index="index" :menu="menu" :key="menu.id"></StElMenuItem>
        </template>
    </el-menu>
</template>

<script>
    import StElMenuItem from './StElMenuItem.vue'
    import StElMenuSub from './StElMenuSub.vue'
    export default {
        name: "StElMenu",
        components: {StElMenuItem,StElMenuSub},
        props: {
            // 自定义数据
            // {id,name,url,isMenu}
            datas: {
                type: [Array, String],
                default: function () {
                    return []
                }
            },
            isMenu: {
                type: Function,
                default: function (menu) {
                    return menu.isMenu || menu.typeDictValue == 'menu'
                }
            },
            isPage: {
                type: Function,
                default: function (menu) {
                    return menu.isPage || menu.typeDictValue == 'page'
                }
            },
            index: {
                type: Function,
                default: function (menu) {
                    return menu.id
                }
            },
            originProp:{
                type: Object,
                default: function () {
                    return {}
                }
            }
        },
        computed: {
            computedTreeData(){
                let r = this.$stArrayTools.listToTree(this.localData,null)
                return r
            },
        },
        data() {
            return {
                localData: []
            }
        },
        mounted() {
            this.initData(this.datas)
        },
        methods: {
            // 根据url加载数据
            initDataByUrl(url) {
                this.axios.get(url).then(res => {
                    this.localData = res.data
                }).catch(error => {
                    this.localData = []
                    if (error.response) {
                        if (error.response.status == 401) {
                            return
                        }
                        if(error.response.data && error.response.data.errorMsg){
                            if (error.response.status != 404) {
                                this.$message.error(error.response.data.errorMsg)
                            }
                        }

                    } else {
                        this.$message.error('网络错误或服务不可用')
                    }
                })
            },
            // 加载
            initData(data) {
                if (!data) {
                    return
                }
                if (this.$stArrayTools.isArray(data)) {
                    this.localData = data
                } else if (this.$stStringTools.isString(data)) {
                    this.initDataByUrl(data)
                } else if (this.$stFunctionTools.isFunction(data)) {
                    this.initData(data())
                }
            },
        },
        watch: {
            datas(val) {
                this.initData(val)
            },
        }
    }
</script>

<style scoped>

</style>